iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
自我挑戰組

TypeScript 能手養成之旅系列 第 9

TypeScript 能手養成之旅 Day 9 物件型別-擴充型別-列舉(Enum)

  • 分享至 

  • xImage
  •  

前言

Enum 是 TypeScript 新增的語法,也被稱做 列舉枚舉
在實務上,我們常用來做狀態判斷,因為管理相同系列的常數非常適宜。

基本用法

enum Days {
  Sun,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat
};

上面的範例會不會覺得很熟悉呢? 是不是和 Object 很像呢? 其實用法也是很類似,只是 Enum 和花括號之間不需要等於,而裡面的變數可以說是常數,因為 Enum 裡面的值是不允許修改的,就因為這樣的特性,Enum 可以說很安全,可以盡可能排除變數不明改變,導致程式整個壞掉的風險。

接下來進行編譯後會是:

var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

其實第一次看到並不是那麼好懂,不過先從整體結構來看,看到一個 function 被原括號包住,然後又跟隨著另一個圓括號且裡面帶進參數,是不是有看出什麼端倪呢?沒錯,這就是立即函式(IIFE)。

不過看是看出來了,但是如何更進一步得知真實情況會是如何呢?我們來試著印出來看看,如下:

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days)
console.log(Days[0])
console.log(Days['Sun'])
console.log(Days)
 => {
  '0': 'Sun',
  '1': 'Mon',
  '2': 'Tue',
  '3': 'Wed',
  '4': 'Thu',
  '5': 'Fri',
  '6': 'Sat',
  Sun: 0,
  Mon: 1,
  Tue: 2,
  Wed: 3,
  Thu: 4,
  Fri: 5,
  Sat: 6
}

console.log(Days[0]) => Sun
console.log(Days['Sun']) => 0

從上方我們可以得知屬性之間相互對應,我們可以使用 Days[0] 拿到 Sun ,也可以使用 Days['Sun'] 拿到 0

不過在一切都感覺開始合理的時候,突然發現 0 到 6 是什麼時候定義的呢?其實原本預設就會以遞增方式由 0 開始定義。

接者我們來試試賦值:

狀況一: 將第一個元素賦值大於 0 的數字

enum Days {Sun=10, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days)
console.log(Days[10])
console.log(Days['Sun'])
console.log(Days) => {
  '10': 'Sun',
  '11': 'Mon',
  '12': 'Tue',
  '13': 'Wed',
  '14': 'Thu',
  '15': 'Fri',
  '16': 'Sat',
  Sun: 10,
  Mon: 11,
  Tue: 12,
  Wed: 13,
  Thu: 14,
  Fri: 15,
  Sat: 16
}
console.log(Days[10]) => Sun
console.log(Days['Sun']) => 10

狀況二: 將某個元素賦值負數

enum Days {Sun, Mon=-1, Tue, Wed, Thu, Fri, Sat};

console.log(Days)
console.log(Days[0])
console.log(Days['Sun'])
console.log(Days) => {
  '0': 'Tue',
  '1': 'Wed',
  '2': 'Thu',
  '3': 'Fri',
  '4': 'Sat',
  Sun: 0,
  Mon: -1,
  '-1': 'Mon',
  Tue: 0,
  Wed: 1,
  Thu: 2,
  Fri: 3,
  Sat: 4
}
console.log(Days[0]) => Tue
console.log(Days['Sun']) => 0
console.log(Days['Tue']) => 0

這邊我們可以看到好像有點亂套了,不過還是可以看出 TypeScript 還是有遵循規則,只是 0 出現了兩次,而卻沒報錯,所以我們會盡量避免這樣的事情發生,使用時盡量小心。

狀況三: 將某個元素賦值小數

enum Days {Sun, Mon=1.7, Tue, Wed, Thu, Fri, Sat};

console.log(Days)
console.log(Days[0])
console.log(Days['Sun'])
{
  '0': 'Sun',
  '1': 'Mon',
  Sun: 0,
  Mon: 1,
  Tue: 1.7,
  '1.7': 'Tue',
  Wed: 2.7,
  '2.7': 'Wed',
  Thu: 3.7,
  '3.7': 'Thu',
  Fri: 4.7,
  '4.7': 'Fri',
  Sat: 5.7,
  '5.7': 'Sat'
}
Wed
0
console.log(Days[2.7]) => Tue
console.log(Days['Sun']) => 0

我們在第二個元素賦值小數,可以發現第一個元素一樣從 0 開始,逐漸遞增直到我們賦值小數的元素之後,整數繼續遞增。

結語

今天介紹了 Enum 基本用法,其餘用法將於明天繼續來跟大家一起了解。


上一篇
TypeScript 能手養成之旅 Day 8 物件型別-擴充型別-元組(Tuple)
下一篇
TypeScript 能手養成之旅 Day 10 物件型別-擴充型別-列舉(Enum)
系列文
TypeScript 能手養成之旅16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言